<template>
    <div>
        <div style="padding-top: 10px">
            <div style="width: 70%; margin: 0 auto">
                <el-input placeholder="请输入内容搜索" v-model="input3" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
                </el-input>
                <el-card style="margin-top: 20px;margin-bottom: 10px;display: flex;justify-content: left">
                    <p slot="header">搜索热门</p>
                    <el-link style="margin: 10px">黄山</el-link>
                    <el-link style="margin: 10px">嵩山</el-link>
                    <el-link style="margin: 10px">华山</el-link>
                    <el-link style="margin: 10px">邓浩然故居</el-link>
                </el-card>
                <!--<div>
                    <el-divider></el-divider>
                    <div style="text-align: left">
                        <div style="display: flex;justify-content: space-between;height: 200px">
                            <div style="width: 70%;margin-right: 50px">
                                <div style="display: flex;justify-content: space-between">
                                    <h4>黄山景区</h4>
                                    <el-button type="text">立即购票</el-button>
                                </div>
                                <p>黄山，中华十大名山之一，天下第一奇山。位于安徽省南部黄山市境内，有72峰，主峰莲花峰海拔1864米，与光明顶、天都峰并称三大黄山主峰，为36大峰之一。黄山是安徽旅游的标志，是中国十大风景名胜唯一的山岳风光。现为世界文化与自然双重遗产，世界地质公园，国家AAAAA级旅游景区，国家级风景名胜区，全国文明风景旅游区示范点，
                                    黄山原名“黟山”，因峰岩青黑，遥望苍黛而名。后因传说轩辕黄帝曾在此炼丹，故改名为“黄山”。
                                </p>
                                <el-button-group style="float: right">
                                    <el-button size="small" style="width: 150px;color: #a0d911;border-color: #a0d911;background-color: #fcffe6"><i class="el-icon-document"></i>查看详情</el-button>
                                    <el-button size="small" style="width: 150px;color: #ff928e;border-color: #ff928e;background-color: #fcffe6"><i class="el-icon-plus"></i>收藏景区</el-button>
                                </el-button-group>
                            </div>
                            <div style="width: 30%;height: 100%; display:flex; align-items: center">
                                <img src="../assets/yunhai.jpg" class="image" style="width: 100%;height: 180px;">
                            </div>
                        </div>
                        <el-divider></el-divider>
                    </div>
                    <div style="text-align: left">
                        <div style="display: flex;justify-content: space-between;height: 200px">
                            <div style="width: 70%;margin-right: 50px">
                                <div style="display: flex;justify-content: space-between">
                                    <h4>嵩山景区</h4>
                                    <el-button type="text">立即购票</el-button>
                                </div>
                                <p>
                                    嵩山，古称“外方”，夏商时称“崇高”、“崇山”，西周时成称为 “岳山”，以嵩山为中央左岱（泰山）右华（华山），定嵩山为中岳，始称“中岳嵩山”。嵩山位于河南省西部，地处登封市西北部，西邻古都洛阳，东临古都郑州，属伏牛山系。 嵩山总面积约为450平方公里，由太室山与少室山组成，共72峰，海拔最低为350米，最高处为1512米。
                                </p>
                                <el-button-group style="float: right">
                                    <el-button size="small" style="width: 150px;color: #a0d911;border-color: #a0d911;background-color: #fcffe6"><i class="el-icon-document"></i>查看详情</el-button>
                                    <el-button size="small" style="width: 150px;color: #ff928e;border-color: #ff928e;background-color: #fcffe6"><i class="el-icon-plus"></i>收藏景区</el-button>
                                </el-button-group>
                            </div>
                            <div style="width: 30%;height: 100%; display:flex; align-items: center">
                                <img src="../assets/yunhai.jpg" class="image" style="width: 100%;height: 180px;">
                            </div>
                        </div>
                        <el-divider></el-divider>
                    </div>
                    <el-pagination></el-pagination>
                </div>-->
                <spot-list></spot-list>
            </div>

        </div>
        <div class="tail" style="width: 100%;height:200px;background-color: #f4ffb8;margin: 0">
            <p>developed by lark chan</p>
        </div>
    </div>
</template>

<script>
    import SpotList from "./items/SpotList";
    import axios from 'axios'
    export default {
        name: "Search",
        components: {SpotList},
        data(){
            return{
                input3:''
            }
        },
        methods:{
            async search(){
                axios.post('http://localhost:5000/search',{queryString:this.input3}).then(res=>{
                    res.data
                })
            },

        }
    }
</script>

<style scoped>

</style>
